<template>
  <div class="activdata" v-for="(item, index) in props.activedata" :key="index" @click="btnactivindex(item)">
    <div class="activdata_text" :class="{ 'activdata_text_activ': activindex == item.label }">{{ item.label }}</div>
  </div>

</template>

<script setup>
import { ref, onMounted, inject, watch } from 'vue'

const props = defineProps({
  activedata: {
    type: Array,
    default: () => []
  },
  leftActiveLogIndex: {
    type: String,
    default: ''
  }
})




const injectedBtnactivindex = inject('btnactivindex')


const activindex = ref(props.leftActiveLogIndex)


const btnactivindex = (data) => {
  // 更新本地的 activindex
  activindex.value = data.label

  // 调用祖组件提供的函数
  if (injectedBtnactivindex) {
    injectedBtnactivindex(data)
  }
}

// watch(() => props.leftActiveLogIndex, (newVal) => {
//   console.log('newVal', newVal)
//   activindex.value = newVal
// })

onMounted(() => { })

</script>

<style lang="less" scoped>
.activdata {
  width: 290px;
  height: 36px;
  color: #93B0EB;
  margin: 8px 0;
  cursor: pointer;
  font-size: 14px;

  .activdata_text {
    width: 100%;
    padding: 8px 0 8px 21px;
  }

  .activdata_text_activ {
    color: #3BDEFF;
    background: rgba(235, 243, 255, 0.1);
    border-radius: 4px;
  }

}
</style>